<template>
    <div class="m-menu">
        <dl class="nav" @mouseleave="mouseleave()">
            <dt>全部分类</dt>
            <dd v-for="(item,idx) in menu" 
                :key="idx" 
                @click="click(item)"
                @mouseenter="mouseenter">
                <i :class="item.type" style="font-size:23px"/>&nbsp;{{item.name}}<span class="arrow"/>
            </dd>
        </dl>
        <!-- <div class="detail"
            v-if="kind"
            @mouseenter="din"
            @mouseleave="dout">
            <template v-for="(item,idx) in choosedetail.child">
                <h4 :key="idx" style="color:black">{{ item.title }}</h4>
                <span v-for="v in item.child" :key="v">{{v}}</span>
            </template>
        </div> -->
    </div>
</template>
<script>
export default {
    data(){
        return {
            kind: '',
            menu:[{
                type: 'el-icon-food',
                name: '美食'
            },{
                type: 'el-icon-cold-drink',
                name: '饮品'
            },{
                type: 'el-icon-shopping-cart-full',
                name: '超市'
            },{
                type: 'el-icon-apple',
                name: '生鲜'
            }]
        }
    },
    computed:{
        choosedetail: function(){
            return this.menu.filter((item) => item.type === this.kind)[0];
        }
    },
    methods:{
        mouseleave: function(){
            let self = this;
            self._timer = setTimeout(function(){
                self.kind = ''
            }, 150)
        },
        mouseenter: function(e){
            this.kind = e.target.querySelector('i').className;
        },
        din: function(){
            clearTimeout(this._timer);
        },
        dout: function(){
            this.kind = '';
        },
        click: function(e){
            this.$router.push({path:'/products?category='+e.name});
        }
    }
}
</script>